<template>
	<view class="confirm">
		<view class="delivery-address bgc padd mar" @tap="$Router.push({path: '/pages/order/address'})">
			<view class="address padd">选择收货地址</view>
			<uni-icons type="right" size="20" color="#8a8a8a"></uni-icons>
		</view>
		<view class="goods-list mar bgc padd">
			<view class="goods-title padd">商品列表</view>
			<view class="goods-item padd" v-for="(item,i) in goodsList" :key="i">
				<image class="goods-img" :src="item.img" mode="aspectFill"></image>
				<view class="goods-msg">
					<view class="msg-left">
						<view class="name">{{item.name}}</view>
						<view class="size">{{item.size}}</view>
						<view class="price">￥{{item.price}}</view>
					</view>
					<view class="msg-right">x{{item.num}}</view>
				</view>
			</view>
		</view>

		<view class="dis-method bgc">
			<view class="dis-title">配送方式</view>
			<view class="method">
				<image class="met-img" src="../../static/img/check_fill.png" mode=""></image>
				<view class="met-name">快递</view>
			</view>
		</view>


		<view class="remark bgc padd">
			<view class="remark-title padd">备注说明</view>
			<view class="remark-text padd">
				<textarea class="text-tet" />
			</view>
		</view>
		<view class="top-option bgc padd">
			<view class="coupon padd" @tap="isDiscount = true">
				<view class="coupon-title">优惠券</view>
				<view class="coupon-opt">
					<view class="title">选择优惠券</view>
					<uni-icons type="right" size="16" color="#8a8a8a"></uni-icons>
				</view>
			</view>
			<view class="freight bgc padd">
				<view class="freight-title">运费</view>
				<view class="freight-opt">￥9.90</view>
			</view>
			<view class="goods-price bgc padd">
				<view class="price-title">商品金额</view>
				<view class="price-opt">￥99.90</view>
			</view>
		</view>
		<view class="total-price bgc padd">
			<view class="left-price">
				合计：
				<view class="price">￥108.90</view>
			</view>
			<view class="right-total" @tap="orderPay">
				立即支付
			</view>
		</view>



		<u-popup :show="isDiscount" :round="10" mode="bottom" @close="popupClose" @open="popupOpen"
			:closeOnClickOverlay="true">
			<view class="dis-count">
				<image @tap="isDiscount = false" class="img-close" src="../../static/img/close.png" mode=""></image>
				<view class="dis-count-head">
					<view class="line-text">选择优惠券</view>
				</view>
				<scroll-view scroll-y="true" class="scroll-y">
					<t-count :disCountList="disCountList"></t-count>
				</scroll-view>

				<view class="dis-count-btn">
					确认选择
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDiscount: false,
				disCountList: [{
						price: 10,
						money_off: '单笔满199使用',
						period_of_validity: '2020.05.30-06.30'
					},
					{
						price: 20,
						money_off: '单笔满199使用',
						period_of_validity: '2020.05.30-06.30'
					},
					{
						price: 40,
						money_off: '单笔满199使用',
						period_of_validity: '2020.05.30-06.30'

					}, {
						price: 40,
						money_off: '单笔满199使用',
						period_of_validity: '2020.05.30-06.30'
					}
				],
				
				goodsList: [{
						name: '连衣裙',
						size: '连衣裙M码数',
						price: 99.90,
						num: 1,
						img: '../../static/img/big_2.png'
					},
					{
						name: '连衣裙',
						size: '小香风毛衣M码',
						price: 99.90,
						num: 1,
						img: '../../static/img/big_3.png'
					}
				]
			};
		},
		methods: {
			orderPay() {
				this.$Router.push('/pages/order/payment')
			},
			popupClose() {
				this.isDiscount = false
			},
			popupOpen() {

			},
			
		}
	}
</script>

<style lang="scss">
	page {
	}

	.disb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bgc {
		background-color: #fff;
	}

	.padd {
		padding: 0 20rpx;
	}

	.mar {
		margin-top: 15rpx;
	}

	.confirm {
		padding-bottom: 200rpx;
	}

	.delivery-address {
		height: 90rpx;

		@extend .disb;

		.address {
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #333333;
		}
	}

	.goods-list {
		padding-top: 30rpx;

		.goods-title {
			padding-bottom: 20rpx;
			font-size: 28rpx;
			letter-spacing: 3rpx;
			color: #333333;
			border-bottom: solid 1rpx #e5e5e5;
		}

		.goods-item {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			border-bottom: solid 1rpx #e5e5e5;
			padding-bottom: 30rpx;

			.goods-img {
				width: 164rpx;
				height: 146rpx;
				background-color: #eeeeee;
				border-radius: 5rpx;
				margin-right: 30rpx;
			}

			.goods-msg {
				width: 70%;
				@extend .disb;

				.msg-left {
					.name {
						font-size: 28rpx;
						letter-spacing: 3rpx;
						color: #545454;
					}

					.size {
						font-size: 22rpx;
						letter-spacing: 2rpx;
						color: #989898;
						margin: 10rpx 0 20rpx;
					}

					.price {
						font-size: 28rpx;
						letter-spacing: 3rpx;
						color: #d81e06;
					}
				}

				.msg-right {
					font-size: 30rpx;
					letter-spacing: 3rpx;
					color: #363636;
				}
			}
		}
	}

	.dis-method {
		@extend .disb;
		padding: 0 40rpx;

		.dis-title {
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #333333;
		}

		.method {
			display: flex;
			align-items: center;
			height: 90rpx;
			text-align: center;

			.met-img {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}

			.met-name {
				font-size: 24rpx;
				letter-spacing: 2rpx;
				color: #666666;
			}
		}
	}

	.remark {
		padding-top: 30rpx;
		padding-bottom: 40rpx;

		.remark-title {
			margin-bottom: 20rpx;
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #333333;
		}

		.remark-text {

			.text-tet {
				padding: 10rpx;
				width: 674rpx;
				height: 160rpx;
				background-color: #f5f5f5;
				border-radius: 5rpx;
				font-size: 24rpx;

			}
		}
	}

	.top-option {
		margin-top: 15rpx;

		.coupon {
			@extend .disb;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: solid 1rpx #e5e5e5;

			.coupon-title {
				font-size: 30rpx;
				letter-spacing: 3rpx;
				color: #333333;
			}

			.coupon-opt {
				@extend .disb;

				.title {
					font-size: 24rpx;
					letter-spacing: 2rpx;
					color: #bfbfbf;
				}
			}
		}

		.freight {
			@extend .disb;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: solid 1rpx #e5e5e5;

			.freight-title {
				font-size: 30rpx;
				letter-spacing: 3rpx;
				color: #333333;
			}

			.freight-opt {
				font-size: 24rpx;
				letter-spacing: 2rpx;
				color: #d81e06;
			}
		}

		.goods-price {
			@extend .disb;
			padding-top: 30rpx;
			padding-bottom: 30rpx;

			.price-title {
				font-size: 30rpx;
				letter-spacing: 3rpx;
				color: #333333;
			}

			.price-opt {
				font-size: 24rpx;
				letter-spacing: 2rpx;
				color: #d81e06;
			}
		}

	}

	.total-price {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		@extend .disb;

		.left-price {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #333333;

			.price {
				font-size: 30rpx;
				letter-spacing: 3rpx;
				color: #d81e06;
			}
		}

		.right-total {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			width: 374rpx;
			height: 90rpx;
			background-color: #c60122;
		}
	}

	.dis-count {
		position: relative;
		padding: 38rpx 0 150rpx 0;

		.img-close {
			position: absolute;
			top: 26rpx;
			right: 25rpx;
			width: 32rpx;
			height: 32rpx;
		}

		.dis-count-head {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 45rpx;
			border-bottom: solid 1rpx #e5e5e5;

			.line-text {
				position: relative;
				font-size: 32rpx;
				line-height: 72rpx;
				letter-spacing: 3rpx;
				color: #333333;

				&:before {
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					content: '';
					display: block;
					width: 44rpx;
					height: 6rpx;
					background-color: #c60122;
					border-radius: 3rpx;
				}
			}
		}

		.scroll-y {
			height: 520rpx;

			
		}


		.dis-count-btn {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 90rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #c60122;
			font-size: 30rpx;
			line-height: 72rpx;
			letter-spacing: 3rpx;
			color: #ffffff;
		}
	}
</style>
